<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.imgBox{
    width: 200px;
    height: 200px;
    margin-top: 200px;
    margin-left: 300px;
    position: relative; 
    transform-style: preserve-3d;
    transform: perspective(700px) rotateY(-60deg) rotateX(45deg);
}
.imgBox div{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 10px 10px 150px #5fbdff;
}

.top{

    transform: translateZ(100px);
}

.bottom{
  
    transform: translateZ(-100px);
}

.left{

    transform: rotateX(90deg) translateZ(-100px);
}

.right{

     transform: rotateX(90deg) translateZ(100px);
}

.front{
 
    transform: rotateY(90deg) translateZ(-100px);
}

.back{

    transform:rotateY(90deg) translateZ(100px);
}

	</style>


<body>
		<div class="imgBox">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="front"></div>
    <div class="back"></div>
</div>

	</body>
	<script>
		window.onload=function(){
    img_box = document.querySelector('.imgBox');
    var x = 0;
    var y = 0;
    function trans(){
        x = x + 10;
        y = y + 10;
        img_box.style.transform='perspective(700px) rotateY('+x+'deg) rotateX('+y+'deg)';
    }
    setInterval(trans,500);//每隔0.5s调用trans函数
}

	</script>
</html>
